<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>视频上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="${pageContext.request.contextPath}/css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<link href="${pageContext.request.contextPath}/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/fileinput.js" type="text/javascript"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
</head>
  <body>
  
   <jsp:include page="header.jsp"></jsp:include>
    
		<!-- upload -->
		<div class="upload">
			<!-- container -->
			<div class="container">
				<div class="upload-grids">
					<div class="upload-right">
						<div class="upload-file">
							<div class="form-group">
								<div class="upload-form-group">
								    <div class="page-header">
								        <h3>上传新视频
								            <small>支持[mkv,avi,rm,mp4]等视频</a></small>
								        </h3>
								    </div>
								    <form enctype="multipart/form-data">
								        <div class="form-group">
								            <div class="file-loading">
								                <input id="file-video" type="file" multiple class="file" data-overwrite-initial="false" data-max-file-count="1">
								            </div>
								        </div>
								        <hr>
								    </form>
							    </div>
						     	<ul class="alert alert-success" style="list-style-type: none" id="kv-success-1"></ul>
						     	<div class="clearfix video-upload-detail">
						     		<form action="${pageContext.request.contextPath}/video/upload_detail" method="post">
										<h4>视频详情</h4>
							     		<div class="form-group xiliu-report-center-cell xiliu-report-center-design col-sm-6">
											<p>标题</p>
											<input class="form-control xiliu-report-center-bottom" name="name"/>
											<p>分类：</p>
											<select class="form-control xiliu-report-center-bottom col-sm-6" name="category.id">
												<c:forEach items="${categorys }" var="category">
													<option value="${category.id }">${category.name }</option>
												</c:forEach>
											</select>
											<p>描述</p>
											<textarea class="form-control xiliu-report-center-bottom" name="intro"></textarea>
											<p class="xiliu-report-center-bottom"><span>播单</span>&nbsp;<a id="video_list_msg" data-toggle="modal" data-target="#myModal" style="cursor:pointer">添加进播单</a>
												<input type="hidden" name="videoList.id" id="video_list_msg_id" value="0">
											</p>
											<input type="hidden" class="origin_url" name="oriUrl" />
											<button class="btn btn-warning">保存并发布</button>
											<button class="btn btn-danger">取消</button>
										</div>
										<div class="col-sm-1"></div>
										<div class="col-sm-5">
											<img class="play_video img-thumbnail" style="display:block;border:1px solid #ccc" alt="" src="${pageContext.request.contextPath}/images/c1.jpg">
										</div>
									</form>
						     	</div>
			       		  </div>
						</div>
					</div>
				</div>
			</div>
			<!-- //container -->
		</div>
		<!-- //upload -->
	
		<jsp:include page="footer.jsp"></jsp:include>		
	</div>
	
	<!-- 添加播单 -->
		<div class="video-list-toadd">
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
					</button>
							<h4 class="modal-title" id="myModalLabel">
						选择播单
					</h4>
						</div>
						<div class="modal-body">
							<c:forEach items="${videoLists }" var="videoList">
								<label class="xiliu-report-center-right"><input type="radio" name="video-list-select" value="${videoList.id }" id=""/><span>${videoList.title }</span></label>
							</c:forEach>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-info" id="video-list-toadd-select-submit">选择</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		</div>
	
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script>
  	    $('#kv-success-1').hide();
  	    $('.video-upload-detail').hide();
		$("#file-video").fileinput({
	        theme: 'fa',
	        uploadUrl: '${pageContext.request.contextPath}/video/upload',
	        allowedFileExtensions: ['swf', 'mkv', 'avi', 'rm', 'rmvb', 'mpeg', 'mpg', 'ogg', 'ogv', 'mov', 'wmv', 'mp4', 'webm', 'mp3'],
	        overwriteInitial: false,
	        maxFileSize: 1073741824,
	        maxFilesNum: 10,
	        initialPreviewAsData: false,
	        //allowedFileTypes: ['image', 'video', 'flash'],
	    }).on('fileuploaded', 
			  	function(event, data, id, index) {
		    var fname = data.files[index].name;
		    var  out = '<li>' + '视频 # ' + ' - '  +   fname + ' 已经成功上传.' + '</li>';
		   // $('#content').attr("value",data.response.videoUrl);//获得后台返回名为videoUrl的json数据
		    $('.origin_url').attr("value",data.response.origin_url);
		    $('#kv-success-1').append(out);
		    $('#kv-success-1').fadeIn('slow');
		    $('#kv-success-1').show();
		    $('.video-upload-detail').show();
		    $('.upload-form-group').hide();
		    });
		$('#video-list-toadd-select-submit').click(function(){
			$('#myModal').modal('hide');
			if($('input[name="video-list-select"]:checked').val() > 0) {
				$('#video_list_msg_id').val($('input[name="video-list-select"]:checked').val());
				$('#video_list_msg').html('添加进  ' + $('input[name="video-list-select"]:checked').next().html());
			}
		});
	</script>
  </body>
</html>